/**
*	O
*	 \ HOLMES
*
*	------------------------
*
*	Holmes is stand-alone diagnostic CSS stylesheet that will highlight
*	potentially invalid or erroneous HTML(5) markup
*
*	@author 		Luke Williams
*	@contributors	Anthony Mann (hover based debug info)
*	@author_url		http://www.red-root.com
*	@project_url	http://github.com/redroot/holmes/
*	@version		1.0.45(06/08/2012)
*
*	Copyright (C) 2012 Luke Williams & RedRoot All Rights Reserved.
* 	holmes.css HTML5 CSS Accessibility Validation
* 	Licenced under GPL license
* 	http://www.gnu.org/licenses/gpl.html
*
*	------------------------
*
*	How does it work?
*
*	Adding the class 'holmes-debug' to any element, ideally the body or html tag,
*	will set debug styles for any elements within that element. 
*
*	e.g.: 
*	<body class="holmes-debug">
*
*	------------------------
*
*	Debug colours and what they mean
*
*	- RED 			denotes an error, invalid markup or a missing attribute
*	- YELLOW 		denotes a warning, so potentionally erroneous markup or bad practice
*	- DARK GREY		denotes a deprecated element or element with deprecated or Non-W3C attributes
*
*	-------------------------
*
*	Notes
*
*	- 	I have chosen to keep all separate types of diagnostis separate, despite sharing
*		common CSS styles, to maintain readability
*
*	- 	Getting pretty long so I've split it into outlines/borders and then Anthony's debug info, first
*		the style, then the content
*
*/
/* ====================================================== */
/* = OUTLINES / BORDERS ================================= */
/* ====================================================== */


/**************
	LINKS 
**************/

/* Errors */

.holmes-debug a:not([href]),
.holmes-debug a[href=""] {
	outline: 2px solid red;
}

.holmes-debug a[href="#"],
.holmes-debug a[href^="javascript"],
.holmes-debug a[title=""]{
	outline: 2px solid #fd0;
}



/**************
	IMAGES 
**************/

.holmes-debug img:not([alt]){
  outline: 2px solid red;
}

.holmes-debug img[alt=""] {
  outline: 2px solid #fd0;
}
/*************************
	MISC ATTRIBUTES
**************************/

.holmes-debug label:not([for]),
.holmes-debug label[for=""],

.holmes-debug input:not([name]),
.holmes-debug input[name=""],

.holmes-debug select:not([name]),
.holmes-debug select[name=""],

.holmes-debug textarea:not([name]),
.holmes-debug textarea[name=""],

.holmes-debug abbr:not([title]),
.holmes-debug abbr[title=""],

.holmes-debug [class=""],
.holmes-debug [id=""],

.holmes-debug table:not([summary]),
.holmes-debug table[summary=""]{
	outline: 2px solid red;
}
/* 
	Warnings here, for inline styles and event calls, 
	ideally they should be external (CSS) and JS applied by JS scripts,
	keep markup purely presentational!
	(not sure about the js yet)
*/
.holmes-debug [style]/*,
.holmes-debug [onclick],
.holmes-debug [onblur],
.holmes-debug [onfocus],
.holmes-debug [onselect],
.holmes-debug [onload],
.holmes-debug [onunload]
 */{ 
	outline: 2px solid #fd0;
 }

/*************************************************************************
	DEPRECATED & NON-W3C CONTENT ELEMENTS (#a9a9a9)
	Based largely on http://www.w3.org/TR/html5/obsolete.html#obsolete
*************************************************************************/

.holmes-debug applet, 
.holmes-debug acronym, 
.holmes-debug center, 
.holmes-debug dir, 
.holmes-debug font,   
.holmes-debug strike, 
.holmes-debug big,
.holmes-debug tt,
.holmes-debug marquee, /* i've left this is because its naff bascially */
.holmes-debug plaintext,  
.holmes-debug xmp {
	border: 2px solid #a9a9a9;
}

body.holmes-debug[background], 
body.holmes-debug[bgproperties], 
body.holmes-debug[topmargin], 
body.holmes-debug[rightmargin], 
body.holmes-debug[bottommargin], 
body.holmes-debug[leftmargin] {
	outline: 2px solid #a9a9a9;
}


.holmes-debug *[bordercolor], 
.holmes-debug *[bordercolordark], 
.holmes-debug *[bordercolorlight],
.holmes-debug table[frame] {
	border: 2px solid #a9a9a9;
}

.holmes-debug *[align], 
.holmes-debug *[valign], 
.holmes-debug *[bgcolor], 
.holmes-debug *[clear], 
.holmes-debug ul[type], .holmes-debug li[type] {
	border: 2px solid #a9a9a9;
}

/*********************
	EMPTY ELEMENTS (warning level for now)
**********************/

.holmes-debug div:empty, 
.holmes-debug span:empty,
.holmes-debug li:empty, 
.holmes-debug p:empty,
.holmes-debug td:empty, 
.holmes-debug th:empty {
	border: 2px solid #fd0;
}

	
/* ====================================================== */
/* = MESSAGES STYLES ==================================== */
/* ====================================================== */

/* ================== */
/* = Warning Style = */
/* ================== */

/* - LINKS - */
.holmes-debug a[href="#"]:hover::after,
.holmes-debug a[href^="javascript"]:hover::after,
.holmes-debug a[title=""]:hover::after,
.holmes-debug img[alt=""]:hover::after,

/* - EMPTY ELEMENTS - */
.holmes-debug div:empty:hover::after, 
.holmes-debug span:empty:hover::after,
.holmes-debug li:empty:hover::after, 
.holmes-debug p:empty:hover::after,
.holmes-debug td:empty:hover::after, 
.holmes-debug th:empty:hover::after,

/* - MISC ATTRIBUTES - */
.holmes-debug [style]:hover::after {
	border-radius: 0.5em;
	display:block;
	padding: 1em;
	margin: 1em;
	background: #fd0;
	position: fixed;
	color: #000;
	left: 0px;
	top: 0px;
	z-index: 9999;
}


/* =============== */
/* = Error Style = */
/* =============== */

/* - LINKS - */
.holmes-debug a:not([href]):hover::after,
.holmes-debug a[href=""]:hover::after,

/* - IMAGES - */
.holmes-debug img:not([alt]):hover:after,

/* MISC ATTRIBUTES */
.holmes-debug label:not([for]):hover::after,
.holmes-debug label[for=""]:hover::after,

.holmes-debug input:not([name]):hover::after,
.holmes-debug input[name=""]:hover::after,

.holmes-debug select:not([name]):hover::after,
.holmes-debug select[name=""]:hover::after,

.holmes-debug textarea:not([name]):hover::after,
.holmes-debug textarea[name=""]:hover::after,

.holmes-debug abbr:not([title]):hover::after,
.holmes-debug abbr[title=""]:hover::after,

.holmes-debug [class=""]:hover::after,
.holmes-debug [id=""]:hover::after,

.holmes-debug table:not([summary]):hover::after,
.holmes-debug table[summary=""]:hover::after {
	border-radius: 0.5em;
	display:block;
	padding: 1em;
	margin: 1em;
	background: red;
	position: fixed;
	color: #000;
	left: 0px;
	top: 0px;
	z-index: 9999;
	text-decoration: none;
}

/* ===================== */
/* = Deprecated Styles = */
/* ===================== */

/* - DEPRECATED & NON-W3C CONTENT ELEMENTS - */
.holmes-debug applet:hover::after, 
.holmes-debug acronym:hover::after, 
.holmes-debug center:hover::after, 
.holmes-debug dir:hover::after, 
.holmes-debug font:hover::after,   
.holmes-debug strike:hover::after,  
.holmes-debug big:hover::after,
.holmes-debug tt:hover::after,
.holmes-debug marquee:hover::after,
.holmes-debug plaintext:hover::after,  
.holmes-debug xmp:hover::after,
.holmes-debug *[bordercolor]:hover::after, 
.holmes-debug *[bordercolordark]:hover::after, 
.holmes-debug *[bordercolorlight]:hover::after,

.holmes-debug table[frame]:hover::after,
.holmes-debug *[align]:hover::after, 
.holmes-debug *[valign]:hover::after, 
.holmes-debug *[bgcolor]:hover::after, 
.holmes-debug *[clear]:hover::after, 
.holmes-debug ul[type]:hover::after,
.holmes-debug li[type]:hover::after {
	border-radius: 0.5em;
	display:block;
	padding: 1em;
	margin: 1em;
	background: red;
	position: fixed;
	background: #a9a9a9;
	color: #000;
	left: 0px;
	top: 0px;
	z-index: 9999;
}

/* ================================ */
/* = Deprecated body style Styles = */
/* ================================ */

body.holmes-debug[background]:hover::after, 
body.holmes-debug[bgproperties]:hover::after, 
body.holmes-debug[topmargin]:hover::after, 
body.holmes-debug[rightmargin]:hover::after, 
body.holmes-debug[bottommargin]:hover::after, 
body.holmes-debug[leftmargin]:hover::after { 
	border-radius: 0.5em;
	display:block;
	padding: 1em;
	margin: 1em;
	background: red;
	position: fixed;
	background: #a9a9a9;
	color: #000;
	bottom: 0px;
	right: 0px;
	z-index: 9999;

	/* Bottom right due to whole body coverage */
}

/* Fixes the case where a table may contain both errors and warnings - potentially other cases of this elsewhere */

.holmes-debug td:empty:hover::after, 
.holmes-debug th:empty:hover::after {
	top: 4em;
}

/* ====================================================== */
/* = MESSAGES CONTENT =================================== */
/* ====================================================== */

/**************
	LINKS
**************/

.holmes-debug a:not([href]):hover::after,
.holmes-debug a[href=""]:hover::after {
	content:'Missing href attribute';
}

.holmes-debug a[href="#"]:hover:after{
	content:"href='#'";
}

.holmes-debug a[href^="javascript"]:hover:after{
	content:'Href has javascript';
}

.holmes-debug a[title=""]:hover::after {
	content:'Empty title attribute';
}


/**************
	IMAGES 
**************/

.holmes-debug img:not([alt]):hover::after {
	content:'Missing alt attribute';
}
.holmes-debug img[alt=""]:hover::after {
	content:'No text in alt attribute';
}


/*************************
	MISC ATTRIBUTES
**************************/

.holmes-debug label:not([for]):hover::after,
.holmes-debug label[for=""]:hover::after{
	content:'Missing for attribute';
}

.holmes-debug input:not([name]):hover::after,
.holmes-debug input[name=""]:hover::after,
.holmes-debug select:not([name]):hover::after,
.holmes-debug select[name=""]:hover::after,
.holmes-debug textarea:not([name]):hover::after,
.holmes-debug textarea[name=""]:hover::after {
	content:'Missing name attribute';
}

.holmes-debug abbr:not([title]):hover::after,
.holmes-debug abbr[title=""]:hover::after {
	content:'Missing title attribute';
}

.holmes-debug [class=""]:hover::after {
	content:'Blank class attribute';
}

.holmes-debug [id=""]:hover::after {
	content:'Blank id attribute';
}

.holmes-debug table:not([summary]):hover::after,
.holmes-debug table[summary=""]:hover::after {
	content:'Missing summary attribute';
}

.holmes-debug [style]:hover::after {
	content: 'Element has inline styles';
}

/*************************************************************************
	DEPRECATED & NON-W3C CONTENT ELEMENTS (#a9a9a9)
	Based largely on http://www.w3.org/TR/html5/obsolete.html#obsolete
*************************************************************************/

.holmes-debug applet:hover::after, 
.holmes-debug acronym:hover::after, 
.holmes-debug center:hover::after, 
.holmes-debug dir:hover::after, 
.holmes-debug font:hover::after,   
.holmes-debug strike:hover::after, 
.holmes-debug big:hover::after,
.holmes-debug tt:hover::after,
.holmes-debug marquee:hover::after, /* i've left this is because its naff bascially */
.holmes-debug plaintext:hover::after,  
.holmes-debug xmp:hover::after {
	content:'Deprecated or Non-W3C element';
}

/************************************************************************
	DEPRECATED NON-W3C ATTRIBUTES (#a9a9a9)
	Based largely on http://www.w3.org/TR/html5/obsolete.html#obsolete
************************************************************************/

body.holmes-debug[background]:hover::after {
	content:'Deprecated or Non-W3C body attribute background';
}

body.holmes-debug[bgproperties]:hover::after {
	content:'Deprecated or Non-W3C body attribute bgproperties';
}
 
body.holmes-debug[topmargin]:hover::after,
body.holmes-debug[rightmargin]:hover::after, 
body.holmes-debug[bottommargin]:hover::after, 
body.holmes-debug[leftmargin]:hover::after {
	content:'Deprecated or Non-W3C body attribute *margin';
}	

.holmes-debug *[bordercolor]:hover::after, 
.holmes-debug *[bordercolordark]:hover::after, 
.holmes-debug *[bordercolorlight]:hover::after {
	content:'Deprecated or Non-W3C attribute bordercolor';
}

.holmes-debug table[frame]:hover::after {
	content:'Deprecated or Non-W3C table attribute frame';
}

.holmes-debug *[align]:hover::after,
.holmes-debug *[valign]:hover::after {
	content:'Deprecated or Non-W3C attribute *align';
}

.holmes-debug *[bgcolor]:hover::after {
	content:'Deprecated or Non-W3C attribute bgcolor';
}

.holmes-debug *[clear]:hover::after {
	content:'Deprecated or Non-W3C attribute clear';
}

.holmes-debug ul[type]:hover::after, 
.holmes-debug li[type]:hover::after {
	content:'Deprecated or Non-W3C list attribute type';
}

/*********************
	EMPTY ELEMENTS (warning level for now)
**********************/

.holmes-debug div:empty:hover::after, 
.holmes-debug span:empty:hover::after,
.holmes-debug li:empty:hover::after, 
.holmes-debug p:empty:hover::after,
.holmes-debug td:empty:hover::after, 
.holmes-debug th:empty:hover::after {
	content:'Empty element!';
}